<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据库表结构导出到工具</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .my-style {
            width: 60%;
            margin-left: 20%;
            margin-top: 60px;
        }

        .buttonStyle {
            margin-left: 40%;
        }

        .bodyStyle {
            background-image: url("./jiujiu.JPG");
            filter: alpha(Opacity:100);
            opacity: 1;
        }
    </style>
</head>
<body class="bodyStyle">
<div id="app" class='my-style'>
    <div>
        <h2>导出数据库中所有表的表结构到 Excel, [模板样式越多加载越慢]</h2>
        <el-form v-model="dataForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="数据库名称">
                <el-input
                        v-model="dataForm.dataSourceName" placeholder='请输入数据库名'></el-input>
            </el-form-item>
            <el-form-item label="表名">
                <el-input
                        v-model="dataForm.tableName" placeholder='请输入表名(不输入则全量导出)'></el-input>
            </el-form-item>
            <el-form-item label="导出地址">
                <el-input
                        v-model="dataForm.excelFileName" placeholder="请输入文件名（默认输出地址为桌面）"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" class="buttonStyle" @click="submitForm()">导出数据库到Excel</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            dataForm: {
                'dataSourceName': '',
                'excelFileName': '',
                'tableName': ''
            }
        },
        methods: {
            submitForm: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.post('/exportExcel/printAll', this.dataForm).then(
                    function (res) {
                        if (res.status === 200) {
                            alert('导出成功');
                        } else {
                            alert('导出失败------原因:' + res.data);
                        }
                        loading.close();
                    })
            }
        }
    })
</script>
</html>